<template>
  <div class="dmt-box flex full_h">
    <div class="dmt-box-item full_h">
      <div class="sidebar-title">设备分类</div>
      <div @click="selectCategory(i)"  class="category-list" v-for="(item, i) in deviceList" :key="i">
        <div class="category-item active" :class="{'categoryAct': deviIdenti==i }">
          <!-- <span class="category-icon"></span> -->
          <i class="el-icon-setting"></i>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="dmt-box-item full_h f1 padd-15">
      <!-- 顶部操作栏 -->
      <div class="top-bar">
        <div class="search-box">
          <span class="search-icon">🔍</span>
          <input type="text" placeholder="搜索设备名称、型号..." />
        </div>
        <el-button class="add-btn">
          <span class="add-icon">+</span>
          <span>添加设备</span>
        </el-button>
      </div>
      <div class="device-section">
        <!-- 设备列表区域 -->
        <div class="section-header">
          <h3 class="section-title">生产设备</h3>
          <div class="section-actions">
            <button class="action-btn">备注</button>
            <button class="action-btn">配置</button>
          </div>
        </div>

        <div class="device-list">
          <!-- 设备卡片1 -->
          <div class="device-card" v-for="i in 10" :key="i">
            <div class="device-header">
              <div class="device-name">演示设备 A</div>
              <div class="device-model">型号: DEMO-A001</div>
            </div>
            <div class="device-info">
              <div>数量: 5台</div>
              <div>状态: 运行中</div>
            </div>
            <div class="device-actions">
              <button class="edit-btn" @click="edit">编辑</button>
              <button class="delete-btn">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑设备信息"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <div class="edit-main">
        <div class="edit-main-head" style="max-height:calc(80vh - 60px);overflow-y:auto">
          <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">设备基本信息</span>
            <el-button type="mini">编辑</el-button>
          </div>

          <div class="out-basic-info padd-up-down-15">
            <div class="basic-info padd-15 bg">
              <el-row>
                <el-form
                  :model="baseForm"
                  status-icon
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-col :span="8">
                    <el-form-item label="设备类别">
                      <el-input :disabled="true" type="text" v-model="baseForm.value1"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称">
                      <el-input :disabled="true" type="text" v-model="baseForm.value2"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="设备型号">
                      <el-input :disabled="true" type="text" v-model="baseForm.value3"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>

          <!-- 维护周期 -->
          <div class="section">
            <div class="edit-tit">
              <span class="padd-lt">维护周期</span>
            </div>
            <div class="maintenance-section">
              <div class="maintenance-content">
                <div class="maintenance-text">参数：电压:220V,功率:2.5KW</div>
                <button @click="handleMaint" class="maintenance-btn" id="setMaintenanceBtn">设置维保周期</button>
              </div>

              <!-- 新增：维保计划展示区域 -->
              <div class="maintenance-plan">
                <div class="plan-title">
                  <span>当前维保计划</span>
                  <span id="planCount">{{ realData.maintTableData.length }} 个项目</span>
                </div>
                <div class="plan-list" id="planList">
                  <!-- 只显示 data1 字段 -->
                  <div v-if="realData.maintTableData.length > 0" class="plan-tags">
                    <div
                      v-for="(item, index) in realData.maintTableData"
                      :key="index"
                      class="plan-tag"
                    >
                      <span class="tag-text">{{ item.data1 }}</span>
                      <span
                        class="tag-cycle"
                        v-if="item.data3"
                      >{{ getCycleText(item.data3) }}{{ item.data2 }}</span>
                    </div>
                  </div>
                  <div v-else class="empty-plan" id="emptyPlan">暂无维保计划，点击上方按钮添加</div>
                </div>
              </div>
            </div>
          </div>

          <div class="edit-tit">
            <span class="padd-lt">设备信息</span>
          </div>
          <div class="table-container padd-up-down-15">
            <el-table
              :header-cell-style="{ 'background-color': '#f8f9fa' }"
              :data="realData.sonTableData"
              border
              style="width: 100%"
            >
              <el-table-column prop="data1" label="集团设备卡编号"></el-table-column>
              <el-table-column prop="data2" label="周定资产编号"></el-table-column>
              <el-table-column prop="data3" label="固定资产卡片号"></el-table-column>
              <el-table-column prop="data4" label="启用日期"></el-table-column>
              <el-table-column prop="data5" label="在用地点"></el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span
                    :class="[
                    { 'status-running': scope.row.data6 == 1 },
                    { 'status-other': scope.row.data6 == 2 },
                  ]"
                  >{{ statusMapp[scope.row.data6] }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope>
                  <el-button type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div slot="footer" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button size="mini" @click="handleEditSave" type="primary">保存</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      custom-class="main-maint-custom"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="设置维保周期"
      :visible.sync="isMaintDialog"
      width="70%"
      :before-close="handleMaintClose"
    >
      <div class="main-maint edit-main">
        <div
          style="max-height:calc(80vh - 150px);overflow-y:auto"
          class="abmain-maint-tle padd-bt15 f1"
        >
          <el-form :model="formTable" ref="ruleFormTable">
            <el-table
              :header-cell-style="{ 'background-color': '#f8f9fa' }"
              :data="formTable.maintTableData"
              style="width: 100%"
            >
              <el-table-column label="维保类型">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`maintTableData[${scope.$index}].data1`"
                    :rules="rulesTable.data1"
                  >
                    <el-input
                      @blur="validateField(`maintTableData[${scope.$index}].data1`)"
                      clearable
                      v-model="scope.row.data1"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数值">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`maintTableData[${scope.$index}].data2`"
                    :rules="rulesTable.data2"
                  >
                    <el-input clearable v-model="scope.row.data2"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column width="280px" label="周期">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`maintTableData[${scope.$index}].data3`"
                    :rules="rulesTable.data3"
                  >
                    <el-radio-group v-model="scope.row.data3">
                      <el-radio label="1">年</el-radio>
                      <el-radio label="2">月</el-radio>
                      <el-radio label="3">日</el-radio>
                      <el-radio label="4">周</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="handleDelMaint(scope.$index)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div
          slot="footer"
          style="
          height: 150px;
          padding-top: 15px;
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, .2);
          background: #fff;
          box-sizing: border-box;
          margin: 0 -15px;"
        >
          <div class="padd-lt">
            <el-button class="maint-btn" size="mini" @click="handleAddMaint">+添加维保计划</el-button>
          </div>
          <div class="modal-footer flex" style="margin:15px 0 0 0">
            <el-button size="mini" @click="handleMaintClose">取消</el-button>
            <el-button size="mini" @click="handleMaintSubmit" type="primary">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deviIdenti:'0',
      baseForm: {
        value1: "",
        value2: "",
        value3: ""
      },
      radio1: "",
      radio2: "",
      radio3: "",
      radio4: "",

      isMaintDialog: false,
      isEditDialog: false,

      deviceList: [
        {
          label: "生产设备"
        },
        {
          label: "电子设备"
        },
        {
          label: "运输工具"
        },
        {
          label: "内置及改造设备"
        },
        {
          label: "一键扩展通道"
        },
        {
          label: "主线、通用区"
        },
        {
          label: "装配工程"
        },
        {
          label: "办公设备"
        },
        {
          label: "其他操作类产品"
        }
      ],
      statusMapp: {
        1: "运行中",
        2: "维修中",
        3: "待机中",
        4: "关机中"
      },
      sonTableData: [],
      realData: {
        baseForm: {
          value1: "11",
          value2: "22",
          value3: "33"
        },
        sonTableData: [
          {
            id: 1,
            data1: "s",
            datalist: "112",
            data3: "113",
            data4: "2023-11-10 00:00:00",
            data5: "2",
            data6: "1"
          },
          {
            id: 2,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1"
          },
          {
            id: 3,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2"
          },
          {
            id: 4,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1"
          },
          {
            id: 5,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2"
          }
        ],
        maintTableData: [
          {
            data1: "清洗",
            data2: "11",
            data3: "1",
            data4: ""
          },
          {
            data1: "清洗",
            data2: "11",
            data3: "",
            data4: ""
          }
        ]
      },
      formTable: {
        maintTableData: []
      },
      ruleFormTable: null,
      rulesTable: {
        data1: [
          {
            required: true,
            validator: this.validateMaintenanceType,
            trigger: ["blur", "change"]
          }
        ],
        data2: [
          {
            required: true,
            validator: this.validateMaintenanceValue,
            trigger: ["blur", "change"]
          }
        ],
        data3: [
          {
            required: true,
            validator: this.validateMaintenancePeriod,
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    selectCategory(e){
      this.deviIdenti = e;
    },
    // 验证器函数移到 methods 中
    validateMaintenanceType(rule, value, callback) {
      console.log("验证维保类型:", value);
      if (!value) {
        return callback(new Error("维保类型不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenanceValue(rule, value, callback) {
      if (!value) {
        return callback(new Error("数值不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenancePeriod(rule, value, callback) {
      if (!value) {
        return callback(new Error("周期不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    validateField(e) {
      console.log("验证字段:", e);
    },
       // 添加周期文本转换方法
    getCycleText(value) {
      const cycleMap = {
        '1': '年',
        '2': '月', 
        '3': '日',
        '4': '周'
      };
      return cycleMap[value] || '';
    },
    edit() {
      console.log("编辑设备");
      this.isEditDialog = true;
      this.baseForm = JSON.parse(JSON.stringify(this.realData.baseForm));
      this.sonTableData = JSON.parse(
        JSON.stringify(this.realData.sonTableData)
      );
      this.formTable.maintTableData = JSON.parse(
        JSON.stringify(this.realData.maintTableData)
      );
    },
    handleMaint() {
      this.isMaintDialog = true;
      this.formTable.maintTableData = JSON.parse(
        JSON.stringify(this.realData.maintTableData)
      );
    },

    handleEditClose() {
      console.log("关闭编辑窗口");
      this.isEditDialog = false;
    },
    handleEditSave() {
      this.isEditDialog = false;

      this.realData.baseForm = JSON.parse(JSON.stringify(this.baseForm));
      this.realData.sonTableData = JSON.parse(
        JSON.stringify(this.sonTableData)
      );
      this.realData.maintTableData = JSON.parse(
        JSON.stringify(this.formTable.maintTableData)
      );
      console.log("保存-后端数据保存");
    },
    handleAddMaint() {
      this.$nextTick(() => {
        const container = document.querySelector(".abmain-maint-tle");
        if (container) {
          container.scrollTo(0, 99999);
          // container.scrollHeight+=132
          console.dir(container);
          console.log("container.height", container.scrollHeight);
        }
      });
      this.ruleFormTable = this.$refs.ruleFormTable;
      console.log("this.ruleFormTable", this.ruleFormTable);
      this.ruleFormTable.validate(valid => {
        if (valid) {
          this.formTable.maintTableData.push({
            data1: "",
            data2: "",
            data3: "",
            data4: ""
          });
          console.log("提交表单");
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    handleDelMaint(e) {
      console.log("handleDelMaint-e", e);
      this.formTable.maintTableData.splice(e, 1);
    },
    handleMaintClose(e) {
      console.log(this.formTable);
      this.isMaintDialog = false;
    },
    handleMaintSubmit(e) {
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate(valid => {
        if (valid) {
          this.realData.maintTableData = JSON.parse(
            JSON.stringify(this.formTable.maintTableData)
          );
          console.log("提交表单------给后端", this.realData);
          this.isMaintDialog = false;
        } else {
          console.log("验证失败");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.dmt-box-item:first-child {
  width: 170px;
  background: #fff;

  .sidebar-title {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  }
  .category-list:hover{
    color: #fff;
    cursor: pointer;
    background: #dddde2;
  }
  .categoryAct{
    color: #fff;
    background: #c6c6de;
  }
}
.dmt-box-item {
  box-sizing: border-box;
}
.category-item {
  padding: 10px 8px;
  padding-left: 15px;
}
/* 顶部操作栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 8px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: 400px;
}

.search-box input {
  border: none;
  outline: none;
  flex: 1;
  padding: 5px 10px;
  font-size: 14px;
}

.search-icon {
  color: #999;
  font-size: 16px;
}
/* 设备列表区域 */
.device-section {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.section-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #f5f5f5;
}

/* 设备列表 */
.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  box-sizing: border-box;
  // border: 1px solid red;
}

.device-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 15px;
  transition: all 0.3s;
}

.device-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.device-name {
  font-weight: bold;
  font-size: 16px;
  color: #2c3e50;
}

.device-model {
  color: #666;
  font-size: 14px;
}

.device-info {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.device-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.edit-btn,
.delete-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.edit-btn {
  background-color: #e6f7ff;
  color: #1890ff;
}

.delete-btn {
  background-color: #fff2f0;
  color: #ff4d4f;
}
.add-btn {
  background: linear-gradient(135deg, #4a90e2 0%, #7b68ee 100%);
  color: #eee;
}
// dialog
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__header {
  background-color: #1a4b8c;
  font-size: 16px;
  span {
    font-weight: bold;
    color: #fff !important;
  }
  button {
    font-size: 20px;
    i,
    i:hover {
      color: #fff;
    }
  }
}
.edit-main {
  padding: 15px 15px 0;
  box-sizing: border-box;
  .edit-tit {
    border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
}
.bg {
  background-color: #f8f9fa;
}
.modal-footer {
  padding: 15px 20px;
  background-color: #f8f9fa;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}

.status-running {
  color: #52c41a;
  background-color: #f6ffed;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-other {
  color: #fa8c16;
  background-color: #fff7e6;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
// dialog 维保
::v-deep .main-maint-custom {
  margin-top: 20vh !important;
}
.maintenance-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.maintenance-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.maintenance-text {
  font-size: 16px;
}

.maintenance-btn {
  background: #1a4b8c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.maintenance-btn:hover {
  background: #1a4b8c;
}
/* 新增：维保计划展示区域 */
.maintenance-plan {
  margin-top: 20px;
  padding: 15px;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
}

.plan-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.plan-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1a4b8c;
}

.plan-info {
  display: flex;
  flex-direction: column;
}

.plan-type {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.plan-cycle {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.plan-actions {
  display: flex;
  gap: 10px;
}

.edit-plan,
.delete-plan {
  background: none;
  border: none;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.edit-plan:hover,
.delete-plan:hover {
  background: rgba(44, 128, 255, 0.1);
}

.empty-plan {
  text-align: center;
  color: #999;
  padding: 30px;
  font-style: italic;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 10px;
  transition: background 0.2s;
}

.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
// 共同
::v-deep .el-dialog {
  position: fixed !important;
  margin: 0 !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>